<template>
    <div class="details">
        <Header></Header>
        <div class="container">
            <div class="banner">
                <el-image :src="contestData?.cover" lazy></el-image>
            </div>
            <div class="header-nav">
                <div class="left-nav">
                    <div class="nav-item active">
                        <div class="info">
                            <p>竞赛信息</p>
                        </div>
                    </div>
                </div>
                <div class="right-application">
                    <div class="left-time">
                        <div class="end">
                            <p
                                v-if="useTimeHook.getDiff(new Date(contestData?.enrollStartDate as string)) <= 0
                            && useTimeHook.getDiff(new Date(contestData?.enrollEndDate as string)) >= 0"
                            >
                                距离报名结束还有
                                {{ useTimeHook.getDiff(new Date(contestData?.enrollEndDate as string)) }}天
                            </p>
                            <p v-else-if="useTimeHook.getDiff(new Date(contestData?.enrollStartDate as string)) >= 0">
                                距报名开始还有{{ useTimeHook.getDiff(new Date(contestData?.enrollStartDate as string)) }}天
                            </p>
                            <p v-else>报名已结束</p>
                        </div>
                        <div class="interval">
                            <p>
                                报名开始:{{ contestData?.enrollStartDate }} <br />
                                报名结束:{{ contestData?.enrollEndDate }}
                            </p>
                        </div>
                    </div>
                    <div
                        v-if="useTimeHook.getDiff(new Date(contestData?.enrollStartDate as string)) > 0"
                        class="right-main"
                        style="background: #ccc; cursor: not-allowed"
                    >
                        <p>未开始报名</p>
                        <el-icon><Position /></el-icon>
                    </div>
                    <div
                        v-else-if="useTimeHook.getDiff(new Date(contestData?.enrollStartDate as string)) <= 0
                        &&  useTimeHook.getDiff(new Date(contestData?.enrollEndDate as string)) >= 0"
                        @click="application"
                        class="right-main"
                    >
                        <p>立即报名</p>
                        <el-icon><Position /></el-icon>
                    </div>
                    <div v-else class="right-main" style="background: #ccc; cursor: not-allowed">
                        <p>报名已结束</p>
                        <el-icon><Position /></el-icon>
                    </div>
                </div>
            </div>
            <div class="content-main">
                <div class="left-info">
                    <div class="info-title">
                        <p>{{ contestData?.title }}</p>
                    </div>
                    <div class="info-content">
                        <div class="title">
                            <p>竞赛信息</p>
                        </div>
                        <quill-editor
                            :options="{ modules: { toolbar: false } }"
                            contentType="html"
                            :content="contestData?.content"
                            :readOnly="true"
                        ></quill-editor>
                    </div>
                </div>
            </div>
            <div class="comment-content">
                <div class="title">
                    <p>评论({{ commentList.length }})</p>
                </div>
                <div class="post-comment">
                    <div class="comment-input">
                        <el-input v-model="commentContent" :rows="4" type="textarea" placeholder="有想法? 来和大家聊聊吧" resize="none"></el-input>
                    </div>
                    <div class="post">
                        <el-button @click="postComment" type="primary">发布评论</el-button>
                    </div>
                </div>
                <div class="comment-list">
                    <div class="tools">
                        <div class="left-count">
                            <p>
                                <span>{{ commentList.length }}</span
                                >个评论
                            </p>
                        </div>
                        <div class="right-sort">
                            <div class="time">
                                <p @click="changeSortIndex('倒序')" :class="{ selected: sortIndex === '倒序' }">( 按时间倒序 · &nbsp</p>
                                <p @click="changeSortIndex('正序')" :class="{ selected: sortIndex === '正序' }">按时间正序 )</p>
                            </div>
                        </div>
                    </div>
                    <div class="list">
                        <comment-item @replayComment="reloadCommentList" v-for="d in commentList" :key="d.pushTime" :data="d"></comment-item>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getContestDetailsAPI } from "@/api/contest";
import { useRoute, useRouter } from "vue-router";
import { detailsData } from "@/types/api/details";
import CommentItem from "@/components/Details/CommentList.vue";
import { getDetailCommentAPI, sendCommentAPI } from "@/api/comment";
import { SendCommentParams, commentItem as commentItemT } from "@/types/api/comment";
import { ElMessage } from "element-plus";
import { useTime } from "@/hooks/time";
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
const useTimeHook = useTime();
const route = useRoute();
const router = useRouter();
const contestData = ref<detailsData>();
const contestType = ref(0);
const commentContent = ref("");
const sortIndex = ref("倒序");
const commentList = ref<commentItemT[]>([]);

// 子组件回复了刷新评论列表数据
function reloadCommentList() {
    getCommentsList();
}

// 发布评论
async function postComment() {
    let { contestId, type } = route.query;
    type = type as string;
    contestId = contestId as string;
    const data: SendCommentParams = {
        activityId: contestId,
        content: commentContent.value,
        type,
        rootId: "",
        toCommentId: "",
        toCommentUserId: "",
    };
    const res = await sendCommentAPI(data);
    if (res.data.code === 200) {
        await getCommentsList();
        ElMessage({
            message: "发布评论成功",
            type: "success",
        });
    }
}

function changeSortIndex(index: string) {
    sortIndex.value = index;
}

function application() {
    const detailId = contestData.value?.id;
    const t = contestType.value;
    const title = contestData.value?.title;
    router.push({
        path: "/application",
        query: { detailId, type: t, title },
    });
}

async function getContestDetails() {
    let { contestId, categoryId, type } = route.query;
    contestType.value = type as unknown as number;
    contestId = contestId as string;
    categoryId = categoryId as string;
    const res = await getContestDetailsAPI(contestId, categoryId);
    contestData.value = res.data.data;
}
async function getCommentsList() {
    let { contestId } = route.query;
    contestId = contestId as string;
    const res = await getDetailCommentAPI(1, 10, contestId, contestType.value);
    commentList.value = res.data.data || "";
}

onMounted(() => {
    getContestDetails();
    getCommentsList();
});
</script>

<style lang="scss" scoped>
:deep(.ql-container.ql-snow) {
    border: none;
}
.container {
    width: 1080px;
    margin: 0 auto;
    .header-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            z-index: 100;
            bottom: -1px;
            left: -20%;
            width: 100vw;
            height: 1.5px;
            background: #dfdfdf;
        }
        .left-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .nav-item {
                padding: 20px;
                margin: 0 20px;
                margin-left: 0;
                font-size: 18px;
                color: #666;
                font-weight: bold;
                cursor: pointer;
                border-bottom: 3px solid transparent;
            }
            .active {
                border-bottom: 3px solid $main-color;
            }
        }
        .right-application {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left-time {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                flex-direction: column;
                margin-right: 20px;
                .end {
                    color: #666;
                    font-weight: bold;
                    margin-bottom: 5px;
                }
                .interval {
                    color: #878787;
                }
            }
            .right-main {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 164px;
                height: 50px;
                font-size: 20px;
                font-weight: bold;
                color: #fff;
                background: $main-color;
                border-radius: 5px;
                letter-spacing: 1px;
                cursor: pointer;
                p {
                    margin-right: 5px;
                }
            }
        }
    }
    .content-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 30px;
        .left-info {
            flex-basis: 70%;
            .info-title {
                font-size: 26px;
                color: #444;
                font-weight: bold;
            }
            .info-content {
                margin-top: 50px;
                .title {
                    font-size: 21px;
                    padding-left: 10px;
                    border-left: 4px solid $main-color;
                    color: #666;
                }
            }
        }
    }
    .comment-content {
        margin-top: 50px;
        width: 900px;
        .title {
            font-size: 21px;
            padding-left: 10px;
            border-left: 4px solid $main-color;
            color: #666;
        }
        .post-comment {
            margin-top: 20px;
            .post {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-top: 20px;
            }
        }
        .comment-list {
            margin-top: 20px;
            .tools {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-size: 12px;
                color: #666;
                padding: 20px 0;
                border-top: 1px solid #e6e6e6;
                border-bottom: 1px solid #e6e6e6;
                .left-count {
                    span {
                        color: $main-color;
                    }
                }
                .right-sort {
                    margin-left: 10px;
                    > div {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        p {
                            cursor: pointer;
                        }
                        .selected {
                            color: $main-color;
                        }
                    }
                }
            }
        }
    }
}
</style>
